<template>
  <view class="navigation" :style="{'background':bgcolor}">
    <!-- 自适应不同的手机机型，导航顶部留白部分 -->
    <view class="nav--bar-top" :style="{'height':menuButton.top +'px'}"></view>
    <view class="nav-bar-inner">
      <view class="nav-bar-back"
            @click="clickBack"
            :style="{ height:menuButton.height + 'px',width:menuButton.width + 'px',paddingLeft:(statusBar.screenWidth - menuButton.right)+'px',boxSizing:'border-box'}">
        <IconFont name="rect-left" />
      </view>
      <view class="nav-bar-title" :style="{ lineHeight: menuButton.height + 'px'}">详情</view>
      <view class="right" :style="{ width:menuButton.width + 'px' }"></view>
    </view>
    <!-- 设置胶囊离内容距离 -->
    <view class="nav-bar-buttom" :style="{ height:(menuButton.top - statusBar.statusBarHeight) * 2 + 'px' }"></view>
  </view>
</template>
<script setup>
import Taro from "@tarojs/taro";
import {IconFont} from "@nutui/icons-vue-taro";
//获取父组件传递的自定义属性值
const props = defineProps({
  title: {
    type: String,
    default: "IT-TOOL",
  },
  control: {
    type: Boolean,
    default: true,
  },
  bgcolor: {
    type: String,
    default: "linear-gradient( 180deg, #FF5701 0%, #FCBFA0 100%);",
  },
  color: {
    type: String,
    default: "#fff",
  }
})
// 获取不同机型胶囊按钮对应的属性值（宽高，胶囊距离顶部的距离）
const menuButton = Taro.getMenuButtonBoundingClientRect();
const statusBar = Taro.getSystemInfoSync();
const clickBack = () => {
  Taro.navigateBack()
}

</script>
<style>
.nav-bar-inner{
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.nav-bar-back{
  display: flex;
  align-items: center;
}
.nav-bar-title {
  color: #fff;
  font-size: 34rpx;
  font-weight: 600;
}
</style>